<template>
	<w-layout showNavbar navTitle="我的精粹" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="">
					<view class="public-card-2 px-50 py-50 mt-40">
						<view class="fr-ac">
							<image style="width: 40rpx;height: 40rpx;" src="/static/icon/public/yuan-bao.png" mode=""></image>
							<view class="ml-10 fs-32">
								可用精粹
							</view>
							<view @click="PaymentPopup.show = true" class="fr-ac ml-auto">
								<view class="mr-5 color">
									充值
								</view>
								<image style="width: 26rpx;height: 26rpx;" src="/static/icon/public/right-fill.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="color fs-36 ml-50 mt-20">
							{{state.integral}}
						</view>
					</view>
				</view>
				
				<view class="px-100">
					<up-tabs
						@change="tabChange"
						:list="tabs.list" 
						:current="tabs.current"
						lineWidth="14"
						lineHeight="14"
						:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
						:activeStyle="{
							color: publicStyles['--color'],
							fontWeight: 'bold',
							transform: 'scale(1.2)'
						}"
						:scrollable="false"
						itemStyle="height: 60px;"
					>
					</up-tabs>
				</view>
				
				<view class="pt-40">
					<view class="fr-ac mb-40 pb-40 u-border-bottom" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
						<view class="">
							<view class="op-90">
								{{ item.content }}
							</view>
							<view class="op-50 mt-10 fs-24">
								{{ item.addtime }}
							</view>
						</view>
						
						<view class="ml-auto">
							{{ item.change_money }}
						</view>
					</view>
				</view>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<payment
					:show="PaymentPopup.show" 
					type="chongzhi"
					:goods_id="PaymentPopup.goods_id"
					:goods_num="PaymentPopup.goods_num"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		profitIntegral,
		get_user
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
	})
	onShow(async(options) => {
		initData()
		get_profitIntegral()
		get_userApi()
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			get_profitIntegral()
		}
	})
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:0,
				name:'全部',
			},
			{
				id:1,
				name:'收入',
			},
			{
				id:2,
				name:'支出',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		get_profitIntegral()
	}
	
	const state = reactive({
		list:[],
		page:1,
		limit:15,
		last_limit:15,
		
		integral: 0,
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	async function get_profitIntegral(){
		const res = await profitIntegral({
			page: state.page,
			type: tabs.list[tabs.current].id
		})
		state.last_limit = res.data.length
		state.list = state.list.concat(res.data)
	}
	
	async function get_userApi(){
		const res = await get_user({})
		state.integral = res.userinfo.integral
	}
	
	// 支付组件
	const PaymentPopup = reactive({
		show: false,
		goods_id: '',
		goods_num: '',
	})
	async function openPaymentPopup(num){
		// PaymentPopup.goods_id = state.goods_id
		// PaymentPopup.goods_num = num
		PaymentPopup.show = true
	}
	function closePaymentPopup(num){
		PaymentPopup.show = false
	}
	// 支付回调
	async function callback(order_num){
		
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
</style>